<!--
 * @Descripttion: 历史报价明细
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-17 17:49
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-12 18:05:18
-->
<template>
  <div class="page-box">
    <div class="page-box-content">
      <h3 class="page-box-block">基础信息</h3>
      <el-form label-width="120px" size="mini" label-suffix=":">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称">
              <template>
                <el-popover placement="top" trigger="hover">
                  <div class="cell-content">{{baseInfo.projectName}}}</div>
                  <p class="overflow" slot="reference">{{baseInfo.projectName}}</p>
                </el-popover>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编码">{{baseInfo.projectNo}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托状态" style="color: blue; font-size: 24px;">{{baseInfo.orderStateStr}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="询价开始时间">{{baseInfo.startTime|formeTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="询价结束时间">{{baseInfo.endTime|formeTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人姓名">{{baseInfo.consignee}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">{{baseInfo.phone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货期">{{baseInfo.requireDate|formeTime}}至{{baseInfo.requireEndDate|formeTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务地点">
              <template>
                <el-popover placement="top" trigger="hover">
                  <div class="cell-content">{{baseInfo.requireAddress}}</div>
                  <p class="overflow" slot="reference">{{baseInfo.requireAddress}}</p>
                </el-popover>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托附件">
              <el-button type="text" @click="handlePreview(baseInfo.entrustDocument)">{{baseInfo.entrustDocument|formatFile}}</el-button>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="委托说明">{{baseInfo.orderRemark}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 报价列表 -->
      <h3 class="page-box-block">报价列表</h3>
      <el-table
          border
          :data="tableData"
          style="width: 100%"
          :max-height="maxHeightNow">
        <el-table-column type="expand" style="width: 100%">
          <template slot-scope="props" style="width: 100%;">
            <el-table
              border
              :data="props.row.bidBiddingGoodsList"
              style="width: 100%">
              <el-table-column type="index" width="60" label="序号"></el-table-column>
              <el-table-column prop="goodsName" label="商品名称" min-width="140">
                <template slot-scope="scope" style="width: 100%">
                  <el-popover placement="top" trigger="hover">
                    <div class="cell-content">{{scope.row.goodsName}}</div>
                    <p class="overflow table-cell-overflow" slot="reference">{{scope.row.goodsName}}</p>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="typeNo" label="型号" min-width="140">
                <template slot-scope="scope" style="width: 100%">
                  <el-popover placement="top" trigger="hover">
                    <div class="cell-content">{{scope.row.typeNo}}</div>
                    <p class="overflow table-cell-overflow" slot="reference">{{scope.row.typeNo}}</p>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="buyNum" label="购买数量" min-width="100"></el-table-column>
              <el-table-column prop="budget" label="预算(元)" min-width="100"></el-table-column>
              <el-table-column prop="biddingPrice" label="报价单价(元)" min-width="100"></el-table-column>
              <el-table-column prop="sumPrice" label="报价总价(元)" min-width="100"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" width="60" label="序号"></el-table-column>
        <el-table-column prop="suppChinaName" label="供货商名称" width="160"></el-table-column>
        <el-table-column prop="biddingLinkman" label="联系人" width="140"></el-table-column>
        <el-table-column prop="biddingLinkmanMobile" label="联系方式" width="140"></el-table-column>
        <el-table-column prop="sumPrice" label="总报价(元)"></el-table-column>
        <el-table-column prop="biddingStateName" label="询价状态"></el-table-column>
        <el-table-column prop="editSumPrice" label="最終定标价格" v-if="isEditorsumPrice">
          <!--  state 0:中标 1：未中标 ，只有在中标的时候，显示最终中标报价 -->
          <template slot-scope="scope">
            {{scope.row.state === '0' ? scope.row.editSumPrice : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="stateName" label="状态"></el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {queryDictionaryList,getFileInfo} from '@/api/common.api'
  import {queryProOrderInfo,bidBiddingHistoryQueryList} from '@/api/supplier.api'
  export default {
    name: 'offer-details',
    components: {},
    data() {
      return {
        // 是否显示最终定标价格
        isEditorsumPrice: true,
        tableData:[],
        projectId:'',
        stateList:[],
        baseInfo:{},
        dialogImageUrl:'',
        dialogVisible:false
      }
    },
    watch: {},
    filters: {
      formatFile(value) {
        if (value !== null && value !== undefined && value) {
          const objItem = JSON.parse(value)
          return objItem.name
        } else {
          return ''
        }
      },
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    computed: {
      // 表格高度
      maxHeightNow () {
        const height = window.innerHeight
        return height -  290
      },
    },
    created() {},
    mounted() {
      this.projectId = this.$route.query.projectId
      // 查询项目状态
      this.queryProjectStatusListFn()
      // 项目基本信息
      this.queryProOrderInfoFn()
      // 查询供应商项目历史询价记录
      this.bidBiddingHistoryQueryListFn()
    },
    methods: {
      // 预览附件
      handlePreview (value) {
        if (value !== null && typeof value !== undefined && value) {
          const objItem = JSON.parse(value)
          getFileInfo(objItem.fileType,objItem.id).then(res => {
            if (['image/png','image/jpeg'].includes(res.contextType)) {
              this.dialogImageUrl = res.url
              this.dialogVisible = true
            } else {
              // 下载
              document.location.href = res.url
            }
          })
        }
      },
      /**
       * @description 查询供应商项目历史询价记录
       * @author 穆宏宇
       * @date 2020-10-27 19:58:49
       * @param
       * @return
       * */
      bidBiddingHistoryQueryListFn () {
        bidBiddingHistoryQueryList({fkProProjectsId:this.projectId}).then(res=>{
          const quoteList = res
          // 没有修改过报价，就不显示最终定标价格
          const editSumPriceList =  quoteList.filter(item=>item.editSumPrice)
          console.log(editSumPriceList)
          if (editSumPriceList.length === 0) {
            this.isEditorsumPrice = false
          }
          this.tableData = quoteList
        })
      },
      /**
       * @description 查询项目状态
       * @author 穆宏宇
       * @date 2020-10-13 10:19:10
       * @param
       * @return
       * */
      queryProjectStatusListFn () {
        const param = {dictionaryType: 'project_status'}
        queryDictionaryList(param).then(res=>{
          this.stateList = res
        })
      },
      /**
       * @description 项目基本信息
       * @author 穆宏宇
       * @date 2020-10-14 14:46:35
       * @param
       * @return
       * */
      queryProOrderInfoFn (){
        queryProOrderInfo(this.projectId).then(res=>{
          this.baseInfo = res
          // this.purchaseList = [{sumPrice:res.sumPrice,sumBudget:res.sumBudget}]
          // // 项目状态code转文字
          // for (let item in this.stateList) {
          //   if (this.baseInfo.projectState === this.stateList[item].dictionaryKey1) {
          //     this.baseInfo.projectState = this.stateList[item].optional1
          //     break
          //   }
          // }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.page-box {
  padding: 20px;
  &-block{
    margin-bottom: 10px;
    border-bottom: 2px solid cornflowerblue;
  }
  &-content {
    padding: 20px;
    background: white;.set-pagination {
    text-align: right;

  }
 }
}
.cell-content {
  width: 200px;
  min-height: 20px;
  max-height: 200px;
  overflow-y: auto;
}
.overflow {
  width: 300px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
}
.table-cell-overflow {
  width: 100% !important;
}
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
// 将el-table的展开图标替换为其他图标
::v-deep .el-table__expand-icon{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

::v-deep .el-table__expand-icon
::v-deep .el-icon-arrow-right:before{
  content: "\e6d9";
  border: 1px solid #ccc;
  padding: 2px;
}

::v-deep .el-table__expand-icon--expanded
::v-deep .el-icon-arrow-right:before{
  content: "\e6d8";
}
</style>
